<template>
    <div>
        <el-table :header-cell-style="getRowClass" v-if="user_list.rows" @selection-change="handleSelectionChange" :data="user_list.rows.td" stripe style="width: 100%">
            <el-table-column v-if="user_list.rows" v-for="(item, index) in user_list.rows.th" :key="index" :label="item.label" :prop="item.key" :show-overflow-tooltip="item.key == 'desc'"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="viewDetail(scope.row.id)">
                        <i class="el-icon-zoom-in"></i>
                    </el-button>
                    <el-button size="mini" @click="editUser(scope.row.id)">
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button size="mini" @click="delUser(scope.row.id)">
                        <i class="el-icon-delete"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <user-detail :data="details"></user-detail>
        <edit-user :user_form="details"></edit-user>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import user from "@/api/user";

import UserDetail from "./details";
import EditUser from "./edit";

export default {
    name: "personnel-table",
    computed: {
        ...mapGetters("personnel", ["user_list"])
    },
    components: {
        UserDetail,
        EditUser
    },
    data() {
        return {
            del_list: [],
            selection_all: false,
            details: undefined
        };
    },
    methods: {
        async viewDetail(id) {
            await this.getDetail(id);
            this.$store.commit(
                "personnel/CHANGE_IS_USER_DETAIL_DIALOG_SHOW",
                true
            );
        },
        async editUser(id) {
            await this.getDetail(id);
            this.details.role = [];
            this.details.department = [];
            this.$store.commit(
                "personnel/CHANGE_IS_USER_EDIT_DIALOG_SHOW",
                true
            );
        },
        async getDetail(id) {
            await user.getUserDetails(id).then(res => {
                this.details = res;
            });
        },
        delUser(id) {
            this.$confirm("确认删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                user.delUsers([id]).then(res => {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    user.getTableData({pageNumber: 1}).then(res => {
                        this.$store.commit("personnel/CHANGE_USER_LIST", res);
                    }).catch(err => {
                        this.$message.error('刷新失败，请手动刷新!');
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleSelectionChange(val) {
            let arr = [];
            for (let i = 0, len = val.length; i < len; i++) {
                arr.push(val[i].id);
            }
            this.$store.commit("personnel/CHANGE_WAIT_DEL_LIST", arr);
            arr = null;
        },
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (column.property === "num") {
                column.width = 55;
                return "background:#f5f7f9";
            } else if (column.property === "mobile") {
                column.width = 120;
                return "background:#f5f7f9";
            } else if (column.property === "email") {
                column.width = 120;
                return "background:#f5f7f9";
            } else if (column.property === "desc") {
                column.width = 160;
                return "background:#f5f7f9";
            }
            if (rowIndex === 0) {
                return "background:#f5f7f9";
            }
        }
    }
};
</script>

<style>

</style>
